import React, { PureComponent } from 'react';
import { Tabs, Button, message } from 'antd';
import { connect } from 'dva';

import ListItem from "@/components/ListCard";

import { DeviceInfo, BuildInfo, Keys } from '../enum'

const TabPane = Tabs.TabPane;

interface IProps {
  dispatch?: Function,
  orterDetail: {
    id: number,
    companyId: number,
    buildInfo: object,
    deviceInfo: object,
    type: string,
    malfunctionReasonName: string,
    faultReasonName: string,
    handleAlarmStyleName: string,
    handleFaultStyleName: string
  },
  match: {
    params: {
      id: number
    }
  },
}

interface IState {
  data: Array<any>,
  buildInfoData: Array<any>,
  deviceInfoData: Array<any>
}

@connect(({ device_alarm }) => ({
  orterDetail: device_alarm.orterDetail
}))
class Details extends PureComponent<IProps, IState> {

  readonly state: IState = {
    data: [],
    buildInfoData: [],
    deviceInfoData: []
  };

  componentDidMount() {
    const hasMsg = message.loading('', 0.8);
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'device_alarm/queryOrterInfoById',
      payload: params.id
    }).then(() => {
      if (this.props.orterDetail) {
        const buildInfo = this.props.orterDetail.buildInfo || {};
        const deviceInfo = this.props.orterDetail.deviceInfo || {};
        const details: any = this.props.orterDetail || {};
        const buildInfoData = [], deviceInfoData = [], data = [];

        // 处理记录
        Keys.forEach(item => {
          data.push({
            name: item.name,
            value: details[item.key],
            func: item.func
          })
        });

        data.push({
          name: '处理人',
          value: details.type === '3' && details.handleFaultStyle === '2' ? details.maintenance : details.handerName
        }, {
            name: '处理方式',
            value: details.type === '1' ? details.handleAlarmStyleName : details.handleFaultStyleName
          }, {
            name: details.type === '1' ? '误报原因' : '故障原因',
            value: details.type === '1' ? details.faultReasonName : details.malfunctionReasonName
          })

        // 建筑
        BuildInfo.forEach(item => {
          buildInfoData.push({
            name: item.name,
            value: buildInfo[item.key],
            func: item.func
          })
        });

        // 设备
        DeviceInfo.forEach(item => {
          deviceInfoData.push({
            name: item.name,
            value: deviceInfo[item.key]
          })
        });
        deviceInfoData.push({
          name: '安装位置',
          value: details.deviceLocation && details.deviceLocation !== '--' ? details.deviceLocation : details.installationAddrName ? details.installationAddrName : ''
        })

        this.setState({
          data,
          buildInfoData,
          deviceInfoData
        })
      }
    })
  }

  callback = () => { };

  render() {
    return (
      <>
        <Tabs defaultActiveKey="1" onChange={this.callback}>
          <TabPane tab="处理记录" key="1">
            <ListItem data={this.state.data} />
          </TabPane>
          <TabPane tab="基础信息" key="2">
            <ListItem data={this.state.deviceInfoData} />
          </TabPane>
          <TabPane tab="户籍建筑" key="3">
            <ListItem data={this.state.buildInfoData} />
          </TabPane>
        </Tabs>
        <div className="foo">
          <Button onClick={() => {
            window.history.back();
          }}>返回</Button>
        </div>
      </>
    );
  }
}

export default Details;


